<template>
	<view class="page_view">
		<!-- :rightText="top_right" -->
		<!-- @rightClick="rightClick" -->
		<u-navbar title="购物车" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true" ></u-navbar>
		<view class="" @click="rightClick" style="padding: 20rpx;font-size: 28rpx;color: #333;text-align: right;">
			{{top_right}}
		</view>
		<view class="list">
			<view class="list_item flex" v-for="(item, index) in carList">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/no_active.png"
					class="list_item_left" mode="" v-if="!item.actvie" @click="choose_list(index)"></image>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/active.png" class="list_item_left"
					mode="" v-else @click="choose_list(index)"></image>
				<image :src="ImgUrl+item.goods.img[0]" class="list_item_min" mode=""></image>
				<view class="list_item_right">
					<view class="list_item_right_top line-2">{{item.goods.name}}</view>
					<view class="list_item_right_bottom flex">
						<view class="list_item_right_bottom_left">
							<!-- 200
							<text class="list_item_right_bottom_left_text22">积分</text>
							+ -->
							{{item.price}}
							<text class="list_item_right_bottom_left_text22">元</text>
						</view>
						<u-number-box :indexss="index" @change="changenum" v-model="item.quantity" class="number-box">
							<view slot="minus" class="minus">
								<u-icon name="minus" size="22rpx" class="minus_icon" color="#C0C0C0"></u-icon>
							</view>
							<text slot="input" style="
									width: 13px;
									text-align: center;
									border-bottom: 1px solid #eeeeee;
									border-top: 1px solid #eeeeee;
									height: 42rpx;
									line-height: 42rpx;
									font-size: 22rpx;
								" class="input">
								{{ item.quantity }}
							</text>
							<view slot="plus" class="plus">
								<u-icon name="plus" color="#C0C0C0" size="12" class="plus_icon"></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</view>
			<u-empty mode="car" class="empty" v-if="carList.length == 0"></u-empty>
		</view>
		<view class="bottom flex">
			<view class="bottom_left flex1" @click="all_active">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/no_active.png"
					class="list_item_left" mode="" v-if="!is_all"></image>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/active.png" class="list_item_left"
					mode="" v-else></image>
				<view class="bottom_left_text">全选</view>
			</view>
			<view class="bottom_right flex1">
				<view class="list_item_right_bottom_left" v-if="!is_bianji">
					<text class="bottom_right_text_left">合计</text>
					<!-- {{ z_integral }}
					<text class="list_item_right_bottom_left_text22">积分</text>
					+ -->
					{{ z_price }}
					<text class="list_item_right_bottom_left_text22">元</text>
				</view>
				<view class="bottom_btn" @click="submint" v-if="!is_bianji">结算</view>
				<view class="bottom_btn1" @click="del" v-if="is_bianji">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cart,
		updatecar,
		delcar
	} from '@/api/common.js';
	export default {
		data() {
			return {
				carList: [],
				cart_list: [{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					},
					{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					},
					{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					},
					{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					},
					{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					},
					{
						actvie: false,
						value: 1,
						integral: 100,
						price: 100
					}
				],
				is_bianji: false,
				top_right: '编辑',
				is_all: false,
			};
		},

		computed: {
			ImgUrl() {
				// console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
			z_integral() {
				let num = 0;
				for (let item of this.cart_list) {
					if (item.actvie) {
						num += parseFloat(item.integral);
					}
				}
				return num.toFixed(2);
			},
			z_price() {
				let num = 0;
				for (let item of this.carList) {
					if (item.actvie) {
						num += parseFloat(item.price);
					}
				}
				return num.toFixed(2);
			}
		},
		mounted() {
			this.getList();
		},
		methods: {
			del(){
				let goods_id = [];
				for(let i=0,len=this.carList.length;i<len;i++){
					if(this.carList[i].actvie){
						goods_id.push(this.carList[i].sku_id);
					}
				}
				if(goods_id.length==0){
					uni.showToast({
						title:'请选择商品',
						icon:'none'
					})
					return;
				}
				delcar({sku_id:goods_id.join(',')}).then(res=>{
					this.getList();
				})
			},
			getList() {
				cart().then(res => {
					if (res.code == 200001) {
						for (let item of res.data.data) {
							item.actvie = false;
						}
						this.carList = res.data.data;
					}
				}).catch(err => {
					console.log(err, '==err')
				})
			},
			choose_list(index) {
				this.$set(this.carList[index], 'actvie', !this.carList[index].actvie);
				this.isall()
			},
			isall() {
				let arr = this.carList.filter(item => {
					return item.actvie == false
				})
				if (arr.length == 0) {
					this.is_all = true
				} else {
					this.is_all = false
				}
			},
			rightClick() {
				this.top_right = this.is_bianji ? '编辑' : '取消';
				this.is_bianji = !this.is_bianji;
			},
			all_active() {
				// for (let item of this.carList) {
				// 	item.actvie == !this.is_all;
				// }
				this.is_all = !this.is_all
				this.all()
			},
			all(bloom) {
				for (let item of this.carList) {
					item.actvie = this.is_all
				}
			},
			changenum(e){
				console.log(e);
				let {value,caozuotype,indexss} = e;
				let data = {
					goods_id:this.carList[indexss].goods_id,
					sku_id:this.carList[indexss].sku_id,
					// after_sku_id:
				}
				if(caozuotype=='minus'){
					data.type = 'reduce';
				}
				if(caozuotype=='plus'){
					data.type = 'add';
				}
				updatecar(data).then(res=>{
					
				}).catch(err=>{
					if(caozuotype=='minus'){
						this.carList[indexss].quantity++;
					}
					if(caozuotype=='plus'){
						this.carList[indexss].quantity--;
					}
				})
			}
		}
	};
</script>

<style>
	page {
		background: #f6f6f6;
	}

	.page_view {
		padding-bottom: 200rpx;
	}

	.zhanwei {
		width: 100%;
		height: 26rpx;
	}

	.list {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	/* .list_item:first-child{
	margin-top: 0;
} */
	.list_item {
		padding: 32rpx 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.list_item_left {
		width: 36rpx;
		height: 36rpx;
	}

	.list_item_min {
		width: 186rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background: #ccc;
	}

	.list_item_right {
		width: 368rpx;
		height: 100%;
	}

	.list_item_right_top {
		width: 100%;
		height: 86rpx;
		color: #000;
		font-family: Alibaba PuHuiTi;
		font-size: 30rpx;
		font-weight: 400;
	}

	.list_item_right_bottom {
		margin-top: 32rpx;
	}

	.list_item_right_bottom_left {
		color: #dd504a;
		font-family: Alibaba PuHuiTi 2;
		font-size: 28rpx;
		font-weight: 400;
	}

	.list_item_right_bottom_left_text22 {
		font-size: 22rpx;
	}

	.minus {
		width: 42rpx;
		height: 42rpx;
		border-width: 1px;
		border-color: #eeeeee;
		border-style: solid;
		display: flex;
		align-items: center;
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
	}

	.minus_icon {
		margin: 0 auto;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 42rpx;
		height: 42rpx;
		border-width: 1px;
		border-color: #eeeeee;
		border-style: solid;
		display: flex;
		align-items: center;
		border-top-right-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.plus_icon {
		margin: 0 auto;
	}

	.bottom {
		width: 686rpx;
		height: 104rpx;
		border-radius: 16rpx;
		background: #fff;
		position: fixed;
		bottom: 68rpx;
		left: 32rpx;
		border: 1rpx solid #f4f4f4;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.bottom_left_text {
		color: #999;
		font-family: Alibaba PuHuiTi;
		font-size: 30rpx;
		font-weight: 400;
		margin-left: 12rpx;
	}

	.bottom_right_text_left {
		color: #666;
		text-align: right;
		font-family: Alibaba PuHuiTi;
		font-size: 24rpx;
		font-weight: 400;
		margin-right: 8rpx;
	}

	.bottom_btn {
		width: 142rpx;
		height: 68rpx;
		border-radius: 34rpx;
		background: #0165fb;
		margin-left: 20rpx;
		text-align: center;
		line-height: 68rpx;
		color: #fff;
		font-family: Alibaba PuHuiTi;
		font-size: 26rpx;
		font-weight: 400;
	}

	.bottom_btn1 {
		width: 142rpx;
		height: 68rpx;
		border-radius: 34rpx;
		border: 1rpx solid #dd504a;
		margin-left: 20rpx;
		text-align: center;
		line-height: 68rpx;
		color: #dd504a;
		font-family: Alibaba PuHuiTi;
		font-size: 26rpx;
		font-weight: 400;
	}

	.empty {
		margin-top: 300rpx !important;
	}

	/deep/.u-icon {
		margin: 0 auto !important;
	}
</style>